<!--  -->
<template>
  <div class="exchange-page">
    <van-popup v-model="changeShow" closeable position="bottom" round @close="changeClose" z-index="100" >
      <div class="exchange-main">
        <h3>兑换藏品</h3>
        <div class="member-number flex-a-c flex-j-sb">
          <div class="label">转赠数量<span>（最多可转赠数量{{maxtotal}}）</span></div>
          <div>
            <van-stepper v-model="exParams.total" min="1" :max="maxtotal" integer />
          </div>
        </div>
        <div class="cell-group">
          <van-cell-group :border="false">
            <van-field v-model="exParams.address.username" label="收件人" placeholder="请输入收件人" label-class="cell-label" required/>
            <van-field v-model="exParams.address.mobile" label="收件号码" placeholder="请输入手机号"  label-class="cell-label"  required/>
            <van-field 
              v-model="addressName" 
              label="所在地区" 
              placeholder="请选择"
               @click.stop="addressShow = true"  disabled is-link  label-class="cell-label" required
               v-if="!region_hide"/>
            <van-field 
              v-model="exParams.address.street" 
              label="所在街道" 
              placeholder="请选择" 
              @click.stop="streetClick" 
              is-link label-class="cell-label" disabled  required
              v-if="strShow && !region_hide"/>
            <van-field v-model="exParams.address.address" label="详细地址" placeholder="请输入详细地址" type="textarea" label-class="cell-label"  required/>
          </van-cell-group>
        </div>
        <div class="sponsor-confrim" @click="exchangeClick">确认兑换</div>
      </div>
    </van-popup>
    <van-popup v-model="streetShow" :style="{ width: '100%', height: '100%', overflow: auto }" position="right" @close="onClose">
      <van-nav-bar title="选择街道" left-text="" right-text="" left-arrow @click-left="treetShowLeft" />
      <div class="content">
        <block v-for="(item, index) in districtVal" :key="index">
          <van-cell :title="item.areaname" @click="streetConfirm(item)" is-link title-style="text-align:left" />
        </block>
      </div>
    </van-popup>
    <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

  export default {
    name:'',
    props: {
      changeShow: Boolean,
      addressName:String,
      maxtotal:Number,
      exParams:Object
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        is_region:'',
        region_hide:'',
        addressShow:false,
        strShow:false,
        streetShow:false,
        district: district,
        districtVal:[],
        district_id:'',
        timeoutId:''
      };
    },
  
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    exchangeClick() {
      // this.$emit('update:changeShow',false);
      this.$emit('exchangeClick');
    },
    changeClose() {
      this.$emit('update:changeShow', false);
    },
    treetShowLeft() {
      this.streetShow = false;
    },
    addressCallback(obj) {
      console.log(obj);
      this.district_id = obj.itemValue3;
      // this.strShow = true;
      this.addressShow = false;
      this.getStreet(this.district_id);
      this.$emit('addressCallback', obj);
    },
    streetClick() {
      console.log(this.fun.isTextEmpty(this.district_id));
      if(this.is_region == 1 &&  this.fun.isTextEmpty(this.district_id)) {
        this.$dialog.alert({ message: "请先选择所在地区" });
      } else {
        this.streetShow = true;
        this.getStreet(this.district_id);
        // this.$toast('请先选择地区');
      }
    },
    streetConfirm(item) {
      console.log(item);
      this.streetShow = false;
      this.$emit('streetConfirm', item);
    },
    getIsOpenAddress() {
      $http
        .get("member.member-address.is-region")
        .then(response => {
          if (response.result == 1) {
            let data = response.data;
            console.log(data);
            this.is_region = data.is_region;
            console.log(this.is_region);
            this.region_hide = data.region_hide;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getStreet(param) {
      $http
        .get("member.memberAddress.street", { district_id: param })
        .then(response => {
          if (response.result === 1) {
            if (!this.fun.isTextEmpty(response.data) && response.data.length > 0) {
              this.districtVal = response.data;
              this.strShow = true;
            } else {
              this.strShow = false;
            }
          } else {
            this.strShow = false;
          }
        })
        .catch(error => {
          this.strShow = false;
          console.log(error);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    
  }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
.exchange-main ::v-deep .van-cell {
  padding: 12px 16px 14px 4px;
  border-bottom: 1px solid #F0F0F1;
}
.exchange-main ::v-deep  .van-cell:last-child {
  border-bottom: none;
}
.exchange-main  ::v-deep .van-cell--required::before {
  left:-2px;
}
.exchange-main ::v-deep .cell-label {
  font-size: 14px;
  color: #00001C;
  margin:0;
  padding: 0 0 0 1px;
}
.exchange-main ::v-deep .van-cell::after {
  border-bottom: none;
}

</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .exchange-main {
    padding:22px 0 25px 0;
    margin:0 12px;
    h3 {
      font-size: 16px;
      font-weight: bold;
      color: #00001C;
      line-height: 24px;
    }
    .member-number {
      padding:37px 0 22px 0;
      border-bottom: 1px solid #F0F0F1;
      .label {
        font-size: 14px;
        color: #00001C;
        line-height: 24px;
        padding: 0 0 0 4px;
        position: relative;
        span {
          font-size: 13px;
          font-weight: normal;
          color: #AAAAB3;
          line-height: 24px;
        }
        &::before {
          position: absolute;
          left: -2px;
          color: #ee0a24;
          font-size: 14px;
          content: '*';
        }
      }
    }
    .sponsor-confrim {
      width: 100%;
      padding:13px 0;
      font-size: 15px;
      line-height: 15px;
      background-color: var(--themeBaseColor);
      font-weight: 400;
      color: #FFFFFF;
      border-radius: 21px 21px 21px 21px;
    }
    .cell-group {
      padding: 0 0 50px 0;
    }
  }
</style>